<template>
  <div>
    <f7-block
      class="comment_box"
      :class="{ heigh2: isFold }"
      v-if="commentData.length"
    >
      <f7-accordion-item v-for="(item, index) in commentData" :key="index">
        <div class="comment_title_box">
          <div class="top_box" @click="handleCommentClick(item.id)">
            <div class="top_left_box">
              <div class="avatar_box">
                <img
                  :src="
                    item.headerImgUrl
                      ? item.headerImgUrl
                      : '/static/user_header.jpg'
                  "
                />
              </div>
              <div class="text_box">
                <div class="comment_name spanColor">
                  {{ item.userName }}
                </div>
                <div class="comment_time spanSubColor">
                  {{ item.createTime }}
                </div>
              </div>
            </div>
            <div class="top_right_box" @click.stop="handleZan(item, 1)">
              <span class="spanColor">{{
                item.clickCount ? item.clickCount : ''
              }}</span>
              <svg-icon iconClass="zan_white" v-if="!item.isCurrUserClick" />
              <svg-icon iconClass="zan_red" v-else />
            </div>
          </div>
          <div
            style="border-bottom:.5px solid #f0f0f0;margin-left:0.5rem;padding-bottom:0.1rem"
          >
            <div
              class="title_middle_box spanColor"
              @click="handleCommentClick(item.id)"
            >
              {{ item.comment }}
            </div>
            <f7-accordion-toggle>
              <div class="bottom_box spanLinkColor" style="padding:2px 0">
                {{ item.responseArr.length }}条回复>
              </div>
            </f7-accordion-toggle>
          </div>
        </div>

        <f7-accordion-content v-if="item.responseArr.length">
          <div
            class="reply_box"
            v-for="(resItem, resIndex) in item.responseArr"
            :key="resIndex"
            @click="handleCommentClick(resItem.id)"
          >
            <div class="top_box">
              <div class="top_left_box">
                <div class="avatar_box">
                  <img
                    :src="
                      resItem.headerImgUrl
                        ? resItem.headerImgUrl
                        : '/static/user_header.jpg'
                    "
                  />
                </div>
                <div class="text_box">
                  <div class="comment_name spanColor">
                    {{ resItem.userName }}
                  </div>
                  <div class="comment_time spanSubColor">
                    {{ resItem.createTime }}
                  </div>
                </div>
              </div>
              <div class="top_right_box" @click.stop="handleZan(resItem, 1)">
                <span class="spanColor">{{
                  resItem.clickCount ? resItem.clickCount : 0
                }}</span>
                <svg-icon
                  iconClass="zan_white"
                  v-if="!resItem.isCurrUserClick"
                />
                <svg-icon iconClass="zan_red" v-else />
              </div>
            </div>
            <div style="margin-left:0.5rem;padding-bottom:0.1rem">
              <div class="title_middle_box spanColor">
                <span class="spanLinkColor">@{{ resItem.parentName }}:</span
                >{{ resItem.comment }}
              </div>
            </div>
          </div>
        </f7-accordion-content>
      </f7-accordion-item>
    </f7-block>
    <div
      class="no-comment spanColor"
      v-if="!commentData.length"
      @click="handleCommentClick(0)"
    >
      +暂无评论，点击添加评论
    </div>
    <!-- <div class="fold_box">
      <f7-button @click="handleFold()">
        展开|收起
      </f7-button>
    </div> -->
  </div>
</template>
<script>
import { getComment, addClickCount, delClickCount } from '@/api/share.js'
import commentUtil from '@/utils/comment.js'
import { mapGetters } from 'vuex'
import {debounce} from '@/utils/index.js'
export default {
  data() {
    return {
      isFold: false,
      commentData: [],
    }
  },
  props: {
    commentType: {
      type: String,
      default: '',
    },
    shareId: {
      type: Number,
    },
  },
  computed: {
    ...mapGetters({
      getUserInfo: 'getUserInfo',
    }),
  },
  methods: {
    handleFold() {
      this.isFold = !this.isFold
    },
    handleZan:debounce(function(item, val) {
      console.log('handleZan')
      let queryData
      if (this.commentType === 'song') {
        queryData = {
          id: item.id,
          sharedSongId: this.shareId,
          userId: this.getUserInfo.userid,
        }
      } else {
        queryData = {
          id: item.id,
          sharedSongListId: this.shareId,
          userId: this.getUserInfo.userid,
        }
      }
      let curUserZan = false
      this.commentData.forEach((cItem) => {
        if (cItem.id === queryData.id) {
          curUserZan = cItem.isCurrUserClick
        }
        if (cItem.responseArr && cItem.responseArr.length) {
          cItem.responseArr.forEach((rItem) => {
            if (rItem.id === queryData.id) {
              curUserZan = rItem.isCurrUserClick
            }
          })
        }
      })
      if (curUserZan) {
        delClickCount(queryData)
          .then((res) => {
            if (res.code === 200) {
              console.log(this.commentData)
              this.commentData.forEach((cItem) => {
                if (cItem.id === queryData.id) {
                  if (val === 1) {
                    cItem.isCurrUserClick = false
                    cItem.clickCount--
                  }
                }
                if (cItem.responseArr && cItem.responseArr.length) {
                  cItem.responseArr.forEach((rItem) => {
                    if (rItem.id === queryData.id) {
                      if (val === 1) {
                        rItem.isCurrUserClick = false
                        rItem.clickCount--
                      }
                    }
                  })
                }
              })
            }
          })
          .catch((e) => {
            console.log(e)
          })
      } else {
        addClickCount(queryData)
          .then((res) => {
            if (res.code === 200) {
              console.log(this.commentData)
              this.commentData.forEach((cItem) => {
                if (cItem.id === queryData.id) {
                  if (val === 1) {
                    cItem.isCurrUserClick = true
                    cItem.clickCount++
                  }
                }
                if (cItem.responseArr && cItem.responseArr.length) {
                  cItem.responseArr.forEach((rItem) => {
                    if (rItem.id === queryData.id) {
                      if (val === 1) {
                        rItem.isCurrUserClick = true
                        rItem.clickCount++
                      }
                    }
                  })
                }
              })
            }
          })
          .catch((e) => {
            console.log(e)
          })
      }
    },500),
    async getData() {
      let queryData = {}
      if (this.commentType === 'song') {
        queryData = {
          sharedSongId: this.shareId,
        }
      } else {
        queryData = {
          sharedSongListId: this.shareId,
        }
      }
      let res = await getComment(queryData)
      if (res.code === 200) {
        this.commentData = commentUtil.transToArr(res.data)
        console.log(this.commentData)
      } else {
        console.log('获取评论失败')
      }
    },
    handleCommentClick(id) {
      console.log('handleCommentClick...', id)
      this.$emit('responseSomebody', id)
    },
  },
  mounted() {
    this.getData()
  },
}
</script>
<style lang="scss" scoped>
.comment_box {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.comment_title_box,
.reply_box {
  width: 100%;
  margin: 0.1rem 0 0.1rem 0;
  // height:1rem;
  .top_box {
    display: flex;
    width: 100%;
    height: 0.5rem;
    align-items: center;
    justify-content: space-between;
    .top_left_box {
      display: flex;
      align-items: center;
      .avatar_box {
        img {
          width: 0.4rem;
          border-radius: 50%;
        }
      }
      .text_box {
        margin-left: 0.1rem;
        .comment_name {
          font-size: 16px;
          vertical-align: center;
          height: 0.2rem;
          line-height: 0.2rem;
        }
        .comment_time {
          font-size: 12px;
          height: 0.2rem;
          line-height: 0.2rem;
        }
      }
    }
    .top_right_box {
      display: flex;
      text-align: center;
      span {
        font-size: 10px;
        height: 0.16rem;
        line-height: 0.16rem;
        margin-right: 0.05rem;
        margin-top: 0.04rem;
        
      }
      .svg-icon {
        height: 0.2rem;
      }
    }
  }
}
.reply_box {
  width: calc(100% - 0.5rem);
  margin: 0.1rem 0 0.1rem 0.5rem;
}
.heigh2 {
  height: 2rem;
}
.no-comment {
  text-align: center;
}
</style>
